<script setup lang="ts">
import { Document, Menu as IconMenu, Location, Setting, ChromeFilled } from '@element-plus/icons-vue'
import { useRoute, RouterLink } from 'vue-router'
import { useWindowSize } from '@vueuse/core'
import { useUserInfo } from '@/stores/userInfo'
import * as admin from '@/apis/admin'
import { onMounted, ref, watch } from 'vue'
const userInfo = useUserInfo()
const showMobile = ref(false)
const drawer = ref(true)
const route = useRoute()

{
  const { width, height } = useWindowSize()
  watch(
    () => width.value,
    () => {
      showMobile.value = width.value < 900
    },
    { immediate: true }
  )

  watch(
    () => showMobile.value,
    () => {
      drawer.value = !showMobile.value
    }
  )
}

async function loginOut() {
  try {
    let res = await admin.loginOut()
    console.log(res.data)
    window.location.replace('/')
  } catch (error) {
    ElMessage('登出失败，请尝试清除浏览器缓存')
  }
}

function selectMenu() {
  if (showMobile.value) {
    drawer.value = false
  }
}
</script>

<template>
  <div class="common-layout" :class="{ showMobile: showMobile }">
    <el-container>
      <el-aside width="200px">
        <el-drawer direction="ltr" size="200px" v-model="drawer" :lock-scroll="true" :modal="showMobile" :with-header="false">
          <el-menu router :default-active="route.fullPath" @select="selectMenu" class="el-menu-vertical-demo">
            <el-menu-item index="/home/index">
              <el-icon><Connection /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/home/class">
              <el-icon><Connection /></el-icon>
              <span>分类管理</span>
            </el-menu-item>
            <el-menu-item index="/home/swiper">
              <el-icon><DataLine /></el-icon>
              <span>轮播管理</span>
            </el-menu-item>
            <el-menu-item index="/home/video">
              <el-icon><VideoCamera /></el-icon>
              <span>影片管理</span>
            </el-menu-item>
            <el-menu-item index="/home/users">
              <el-icon><UserFilled /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/home/reptile">
              <el-icon><ChromeFilled /></el-icon>
              <span>爬虫设置</span>
            </el-menu-item>
            <el-menu-item index="/home/version">
              <el-icon><ScaleToOriginal /></el-icon>
              <span>版本控制</span>
            </el-menu-item>
          </el-menu>
        </el-drawer>
      </el-aside>
      <el-container style="flex-direction: column; width: 100%">
        <el-affix :offset="0">
          <el-header class="header">
            <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
              <img style="height: 60px" src="@/assets/logoTitle.png" alt="" srcset="" />
              <el-dropdown>
                <span class="el-dropdown-link">
                  欢迎您，{{ userInfo.username }}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item disabled>待添加</el-dropdown-item>
                    <el-dropdown-item divided @click="loginOut">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-header>
          <el-header class="header menuHeader" v-if="showMobile" @click="drawer = true">
            <div style="display: flex; align-items: center">
              <el-icon :size="30"><IconMenu /></el-icon>
              <div style="margin-left: 10px">菜单</div>
            </div>
          </el-header>
        </el-affix>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.el-drawer {
  box-shadow: none;
}

.el-aside {
  > div {
    z-index: 0 !important;
  }
}
.showMobile {
  .el-aside {
    > div {
      z-index: 2013 !important;
    }
  }
}
.el-main {
  z-index: 1;
}
</style>

<style scoped lang="less">
.showMobile {
  .el-aside {
    position: absolute;
    background: #000;
    z-index: 101;
  }
}
.header {
  background: #141414;
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #252525;
}
.menuHeader {
  height: 50px;
}
.el-aside {
  .el-menu {
    border-right: none;
    // height: 100vh;
  }
}

.router-link-active {
  text-decoration: none;
}
a {
  text-decoration: none;
}
</style>
